<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <style>
     
    </style>
  </head>
  <body>
    <!-- header start -->
    <header class="header">
      <div class="logo-wrap">
        <a href="#">
          <img src="./images/logo-@2x.png" class="logo" />
        </a>
      </div>
      <div class="search">
        <a href="#">
          <img src="./images/search-@2x.png" class="search-img" />
        </a>
      </div>
      <div class="login-wrap">
        <a href="#">
          <img src="./images/login-@2x.png" class="login" />
        </a>
      </div>
      <a class="download"> 下载 App </a>
    </header>
    <!-- end header -->
    <!-- nav start -->
    <nav class="nav">
      <div class="swiper" id="nav">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><a href="#" class="active">首页</a></div>
          <div class="swiper-slide"><a href="#">动画</a></div>
          <div class="swiper-slide"><a href="#">番剧</a></div>
          <div class="swiper-slide"><a href="#">国创</a></div>
          <div class="swiper-slide"><a href="#">音乐</a></div>
          <div class="swiper-slide"><a href="#">舞蹈</a></div>
          <div class="swiper-slide"><a href="#">电影</a></div>
          <div class="swiper-slide"><a href="#">电影</a></div>
          <div class="swiper-slide"><a href="#">电影</a></div>
          <div class="swiper-slide"><a href="#">电影</a></div>
        </div>
      </div>
    </nav>
    <!-- end nav -->
    <!-- banner start -->
    <section class="banner">
      <div class="swiper" id="banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="#"><img src="./images/banner1-@2x.png" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href="#"><img src="./images/banner2-@2x.png" alt="" /></a>
          </div>
          <div class="swiper-slide">
            <a href="#"><img src="./images/banner3-@2x.png" alt="" /></a>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </section>
    <!-- end banner -->
    <!-- menu start -->
    <nav class="menu">
      <ul>
        <li>
          <a href="#">
            <img src="./images/icon1.png" alt="" />
            <p>番 剧</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/icon2.png" alt="" />
            <p>游 戏</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/icon3.png" alt="" />
            <p>新 剧</p>
          </a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/icon4.png" alt="" />
            <p>生 活</p></a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./images/icon5.png" alt="" />
            <p>健 康</p></a
          >
        </li>
        <li>
          <a href="#"
            ><img src="./images/icon6.png" alt="" />
            <p>戏 剧</p>
          </a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/icon7.png" alt="" />
            <p>美 食</p>
          </a>
        </li>
        <li>
          <a href="#"
            ><img src="./images/icon8.png" alt="" />
            <p>科 技</p></a
          >
        </li>
        <li>
          <a href="#">
            <img src="./images/icon9.png" alt="" />
            <p>生 活</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/icon10.png" alt="" />
            <p>体 育</p>
          </a>
        </li>
      </ul>
    </nav>
    <!-- end menu -->
    <!-- main start -->
    <main class="main container">
      <!-- tabs start -->
      <section class="tabs">
        <div class="tab-header">
          <div class="tab-header-item active">热门排行</div>
          <div class="tab-header-item">最新热播</div>
          <div class="tab-header-item">综合推荐</div>
        </div>
        <div class="tab-content">
          <div class="tab-content-item" style="display: block">
            <div class="swiper hot-rank" id="hot-rank">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic1.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">70.8万</span>
                          <span class="number">11.5万</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        透明手表。下集预告
                      </p>
                    </a>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic2.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic3.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic4.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content-item">
            <div class="swiper hot-play" id="hot-play">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic3.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic2.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content-item">
            <div class="swiper hot-recommend" id="recommend">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic2.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="common-card">
                    <a href="#">
                      <div class="img">
                        <img src="./images/pic4.png" alt="" />
                        <div class="card-info">
                          <span class="play-count">190.4万</span>
                          <span class="number">6160</span>
                        </div>
                      </div>
                      <p class="title ellipsis-multi-line2">
                        【人类高质量CG】咏春宁次： 笼中鸟心中拳
                      </p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- end tabs -->

      <!-- recommend-list start -->
      <section class="recommend-list">
        <ul>
          <li>
            <a href="">
              <div class="img-wrap">
                <img src="./images/rimg1.png" alt="" />
              </div>
              <div class="info">
                <p class="title ellipsis-single-line">
                  自制战斗机式的打水仗摩托车
                </p>
                <p class="desc ellipsis-single-line">
                  跟小朋友打水仗输了做了个战斗机准备一雪前耻一雪前耻一雪前耻
                </p>
              </div>
              <div class="play-button"></div>
            </a>
          </li>
          <li>
            <a href="">
              <div class="img-wrap">
                <img src="./images/rimg2.png" alt="" />
              </div>
              <div class="info">
                <p class="title ellipsis-single-line">原 神 之 友 （第九期）</p>
                <p class="desc ellipsis-single-line">
                  所有原神玩家都可以参加！期还会额外有一个满……
                </p>
              </div>
              <div class="play-button"></div>
            </a>
          </li>
        </ul>
      </section>
      <!-- end recommend-list -->

      <!-- history-list start -->
      <div class="history">
        <div class="history-header">
          <span class="title">最近在看</span>
          <a href="#" class="more">查看全部</a>
        </div>
        <div class="history-list">
          <div class="swiper swiper-history" id="swiper-history">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic1.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">番外 动态漫</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic2.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">这才是顶级的气场</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic3.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">
                    再飞行，带着梦想再次的飞起
                  </p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic1.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">番外 动态漫</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic2.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">这才是顶级的气场</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="#">
                  <div class="img-wrap">
                    <img src="./images/xxpic3.png" alt="" />
                  </div>
                  <p class="title ellipsis-multi-line2">
                    再飞行，带着梦想再次的飞起
                  </p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end history-list -->

      <!-- info-list start -->
      <section class="info-list">
        <ul>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/pic1.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  透明手表。下集预告
                </p>
              </a>
            </div>
          </li>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/pic2.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  【人类高质量CG】咏春宁次： 笼中鸟心中拳
                </p>
              </a>
            </div>
          </li>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/pic3.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们
                </p>
              </a>
            </div>
          </li>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/pic4.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  这真的是碳基生物能吃的玩意吗？？？
                </p>
              </a>
            </div>
          </li>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/img3.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】
                </p>
              </a>
            </div>
          </li>
          <li>
            <div class="common-card">
              <a href="#">
                <div class="img">
                  <img src="./images/img4.png" alt="" />
                  <div class="card-info">
                    <span class="play-count">190.4万</span>
                    <span class="number">6160</span>
                  </div>
                </div>
                <p class="title ellipsis-multi-line2">
                  爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！
                </p>
              </a>
            </div>
          </li>
        </ul>
      </section>
      <!-- end info-list -->
    </main>
    <!-- end main -->

    <!-- footer-bar start -->
     <footer class="footer-bar">
        <ul>
            <li class="active"><a href="#"><span class="icon icon1"></span><span class="txt">首页</span></a></li>
            <li><a href="#"><span class="icon icon2"></span><span class="txt">动态</span></a></li>
            <li class="add"><a href="#"></a></li>
            <li><a href="#"><span class="icon icon3"></span><span class="txt">会员购</span></a></li>
            <li><a href="#"><span class="icon icon4"></span><span class="txt">我的</span></a></li>
        </ul>
     </footer>
     <!-- end footer-bar -->

    <script src="./js/index.js"></script>
    <script src="./js/rem.js"></script>

    <script src="./js/swiper-bundle.min.js"></script>
    <script>
      var mySwiper1 = new Swiper("#nav", {
        slidesPerView: 6.5,
      });
      var mySwiper2 = new Swiper("#banner", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
      });

      //热门排行榜
      var mySwiper3 = new Swiper("#hot-rank", {
        slidesPerView: 2,
        spaceBetween: 19,
      });

      // 最新热播
      var mySwiper4 = new Swiper("#hot-play", {
        slidesPerView: 2,
        spaceBetween: 19,
      });

      //综合推荐
      var mySwiper5 = new Swiper("#recommend", {
        slidesPerView: 2,
        spaceBetween: 19,
      });

      //   history-list
      var mySwiper6 = new Swiper(".swiper-history", {
        slidesPerView: "auto",
        spaceBetween: 11,
      });
    </script>
  </body>
</html>
